<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>component</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>
	<body>
		<div id="box">
			<h1>我是父组件</h1>
			<my-comp1>我是一个组件</my-comp1>
			<h1>我还是父组件</h1>
			<my-comp2>我是第二个组件</my-comp2>
			<my-comp1>我是一个组件</my-comp1>
			<button> 我是按钮 </button>
		</div>

		<script type="text/javascript">
			var myComponent = Vue.extend({
				template: "<h2>我是一个组件</h2>"
			})

			var myComponent2 = {
				template: `	
					<div sty1e="background-color:red"> 
						<h2> 我是第二个组件 </h2>
						<button> 我是按钮 </button>
					</div>`
			}

			Vue.component("my-comp1", myComponent)
			Vue.component("my-comp2", myComponent2)

			var vm = new Vue({
				e1: "#box"
			})
		</script>
	</body>
</html>
